import { defineStore } from 'pinia'
import { getMenuListApi } from '@/api/system/menu/menu'
import { RouteRecordRaw } from 'vue-router'
import Layout from '@/layout/Index.vue'
import { routerStore } from './router'
const modules = import.meta.glob('../views/**/*.vue')

// 定义state类型
export type MenuState = {
    count: number
    collapse: boolean
    smallCollapse: boolean
    screenIsBig: boolean
    menuList: any
}

// 定义store
export const menuStore = defineStore('menuStore', {
    state: (): MenuState => {
        return {
            count: 0,
            collapse: false,
            smallCollapse: true,
            screenIsBig: false,
            menuList: [
                {
                    path: '/dashboard',
                    component: () => import('@/layout/dashboard/Index.vue'),
                    name: 'dashboard',
                    meta: {
                        title: '首页',
                        icon: 'Buildings-home-4'
                    }
                }
            ]
        }
    },
    actions: {
        setCount(count: number) {
            this.count = count
        },
        setCollapse(collapse: boolean) {
            this.collapse = collapse
        },
        setSmallCollapse(collapse: boolean) {
            this.smallCollapse = collapse
            // console.log('this.smallCollapse=', this.smallCollapse)
        },
        setScreenIsBig(isBig: boolean) {
            this.screenIsBig = isBig
        },
        setMenuList(router: any) {
            return new Promise((resolve, reject) => {
                getMenuListApi()
                    .then((res) => {
                        let accessedRoutes
                        if (res.code == 200) {
                            const rStore = routerStore()
                            //动态生成路由
                            accessedRoutes = filterAsyncRoutes(
                                res.data.route_tree,
                                router,
                                rStore
                            )
                            console.log('路由: ', accessedRoutes)

                            //设置menuList
                            this.menuList = this.menuList.concat(
                                res.data.left_menu_tree
                            )
                            // console.log('左侧菜单: ', this.menuList)
                        }
                        //返回
                        resolve(accessedRoutes)
                    })
                    .catch((error) => {
                        reject(error)
                    })
            })
        }
    },
    getters: {
        getCount(state) {
            return state.count
        },
        getCollapse(state) {
            return state.collapse
        },
        getSmallCollapse(state) {
            return state.smallCollapse
        },
        getScreenIsBig(state) {
            return state.screenIsBig
        },
        getMenuList(state) {
            return state.menuList
        }
    }
})

export function filterAsyncRoutes(
    routes: RouteRecordRaw[],
    router: any,
    rStore: any
) {
    // console.log('route_tree', routes)
    const res: Array<RouteRecordRaw> = []
    routes.forEach((route: any) => {
        const tmp = { ...route }
        const component = tmp.component
        if (route.component) {
            if (tmp.type == 0) {
                tmp.component = Layout
            } else {
                tmp.component = modules[`../views/${component}.vue`]
            }
        }
        if (tmp.children !== null) {
            //递归
            tmp.children = filterAsyncRoutes(tmp.children, router, rStore)
        }
        if (tmp.is_link == false) {
            rStore.setKeepAliveRouters(tmp.name, tmp.meta.keep_alive)
            router.addRoute(tmp)
            res.push(tmp)
        }
    })
    return res
}
